<template>
	<!-- 意见反馈 -->
	<view class="feedback">
		<scroll-view class="chatList" scroll-y="true" :scroll-top="scrollTop" show-scrollbar="false">
			<view class="chatBox">
				<view class="item" v-for="(item,index) in messageList" :key="index">
					<view class="time">
						我说 {{item.create_time}}
					</view>
					<view class="content">
						<text>{{item.content}}</text>
						<view class="arrow">

						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="holder">

		</view>
		<view class="feedbackBar flex-bc">
			<view class="editBox flex">
				<image src="../../../static/user/inputer.png"></image>
				<input type="text" v-model="inputer" placeholder="请告诉我们想要反馈的问题" />
			</view>
			<view class="sendBtn flex-c" @click="fnSendMessage()">
				<image src="../../../static/user/send.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputer: '',
				token: uni.getStorageSync('token'),
				page: 1,
				row: 10,
				messageList: [],
				chatH: '',
				wrapHeight: '',
				scrollTop:0
			};
		},
		onShow() {
			this.fnGetMessageList()
		},
		mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".chatList"); // 获取某个元素
					info.boundingClientRect(function(data) { //data - 各种参数
						console.log(data)
						that.wrapHeight = data.height;
					}).exec()
				}
			});
		},
		methods: {
			fnGetMessageList() {
				this.request({
					url: '/czb/help_center/getFeedbackList',
					method: 'POST',
					data: {
						'store_id': 1,
						'token': this.token,
						'page': this.page,
						'row': this.row
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) {
						this.messageList = ret.data
						let that = this
						setTimeout(function(){
							uni.getSystemInfo({
							success: function(res) { // res - 各种参数
								let info = uni.createSelectorQuery().select(".chatBox"); // 获取某个元素
								info.boundingClientRect(function(data) { //data - 各种参数
									console.log(data)
									that.chatH = data.height;
									// space = (that.chatH - that.wrapHeight)
								}).exec()
							}
						});
						that.fnSetScrollTop()
						},10)
						
						
					}
				})
			},
			fnSendMessage() {
				console.log(this.inputer)
				if (!this.inputer) return
				this.request({
					url: '/czb/help_center/userFeedback',
					method: 'POST',
					data: {
						'store_id': 1,
						'token': this.token,
						'content': this.inputer
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 0) {
						this.inputer = ''
						uni.showToast({
							title: ret.message,
							icon: 'success'
						})
						this.fnGetMessageList()
					}
				})
			},
			// 设置scrollTop值 保证用户能看到最新发送的消息
			fnSetScrollTop() {
				console.log(this.chatH)
				console.log(this.wrapHeight)
				var space = this.chatH - this.wrapHeight
				

				console.log(space)
				if (space > 0) {
					setTimeout(() => {
						this.scrollTop = space + 40
					}, 100)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feedback {
		height: 100%;

		.chatList {
			// overflow-y: scroll;
			height: calc(100% - 100rpx);
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			.chatBox{
				.item {
					overflow: hidden;
					margin-bottom: 40rpx;
					color: #333;
				
					.time {
						text-align: right;
						font-size: 26rpx;
						color: #999;
					}
				
					.content {
						display: inline-block;
						background: #fff;
						font-size: 30rpx;
						padding: 20rpx;
						float: right;
						border-radius: 10rpx;
						margin-top: 20rpx;
						position: relative;
						margin-right: 16rpx;
				
						.arrow {
							position: absolute;
							right: -22rpx;
							top: 50%;
							transform: translateY(-50%);
							border-color: #fff #f7f8fc #f7f8fc #f7f8fc;
							border-style: solid;
							border-width: 12rpx 12rpx 0 20rpx;
							height: 0;
							width: 0;
							transform: rotate(-90deg);
						}
					}
				}
			}
			
		}

		.holder {
			height: 100rpx;
		}

		.feedbackBar {
			width: 100%;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100rpx;
			border-top: 1rpx solid #e3e3e3;
			background: #fff;
			padding: 0 20rpx;

			view {
				height: 100%;
			}

			.editBox {
				align-items: center;
				color: #333;
				flex: 1;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}

				input {
					font-size: #333;
					flex: 1;
				}
			}

			.sendBtn {
				margin-left: 20rpx;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
</style>
